<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>处理JSON数据</title>
    <style>
    	#box{
    		width: 200px;
    		border: 1px solid #000;
    		padding: 20px;
    		border-color: #feeeed;
    		float:left;
    	}
    	#addbox{
    		width: 300px;
    		padding: 20px;
    		border-color: #abcdef;
    		position: fixed;
    		right: 0px;
    	}
    </style>
</head>
<body>
    <h1>JSON无刷新添加数据</h1>
    <hr>
    <div id="box"></div>
    <div id="addbox">
    	<form name="addform" onsubmit="return addDate()">
    		姓名: <input type="text" name="name"><br>
    		性别: <input type="radio" name="sex" value="0">女
    			 <input type="radio" name="sex" value="1">男
    			 <input type="radio" name="sex" value="2">保密<br>
    		年齡: <input type="text" name="age"><br>
    		<button>提交</button>

    	</form>
    </div>
    <script>
    	function addData(){
    		// 各种获取
    		var name = document.addform.name.value;
    		var sex = document.addform.sex.value;
    		var age = document.addform.age.value;
	    	var xhr = new XMLHttpRequest();
	    	//事件回调
	    	xhr.onreadystatechange = function(){
				if(xhr.readyState == 4){
					if(xhr.status == 200){
					//xhr.responseText
					console.log(xhr.responseText);
					if(xhr.responseText > 0){
						//loadHtml();
						var tr = table.insertRow(table.rows.length);
						tr.insertCell(0).innerHTML = xhr.responseText;
						tr.insertCell(1).innerHTML = name;
						tr.insertCell(2).innerHTML = sex;
						tr.insertCell(3).innerHTML = obj[i].age;
						tr.insertCell(4).innerHTML = ' ';
						alert('安排上了...');
					}else{
						alert('没安排上...');
					}
				}
			}
		}
		xhr.open('post','./php/5.php',true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send('name='+name+'&sex='+sex+'&age='+age);
		return false;
	}


    loadHtml();
	function loadHtml(){
		var xhr = new XMLHttpRequest();
	    //事件回调
	    xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					//console.log(xhr.responseText);
					//清空之前的数据
					box.innerHTML = '';
					var jsonStr = xhr.responseText;
					//eval('var obj = '+jsonStr);
					//var obj = eval('('+jsonStr+')');
					var obj = JSON.parse(jsonStr);
					console.log(obj);

					//生成表格
					var table = document.createElement('table');
					table.width = 800;
					table.border = 1;
					table.cellSpacing = 0;
					table.cellPadding =5;
					table.id = 'table';
					console.log(table);
					box.appendChild(table);

					//添加表头
					var tr = table.insertRow(0);
					addTH(tr,['ID','NAME','SEX','AGE','PRO']);

					//向表格添加数据
					for (var i = 0; i < obj.length; i++) {
						var tr = table.insertRow(i+1);
						tr.insertCell(0).innerHTML = obj[i].id;
						tr.insertCell(1).innerHTML = obj[i].name;
						tr.insertCell(2).innerHTML = obj[i].sex;
						tr.insertCell(3).innerHTML = obj[i].age;
						tr.insertCell(4).innerHTML = obj[i].province;
					}
				}
			}
		}
    	//请求初始化
    	xhr.open('get','./php/4.php',true);
    	//正式发送
    	xhr.send();
    }

    
	function addTH(tr,data){
		for (var i = 0; i < data.length; i++) {
				var th = document.createElement('th');
				th.innerHtml = data[i];
				tr.appendChild(th);
		}
	}

    </script>
    

</body>
</html>